<template>
<div class="all">
  <div class="include">
    <div class="one" style="width:28%;height: 100%;background-color: #e1e4e8">
      <div style="display: flex;align-items:center;width: 100%;height: 40px;">
        <p style="font-size: 20px;font-weight: bolder;"><i class="el-icon-document"></i>头条</p>
      </div>
      <div style="width: 100%;height: 200px;">
        <img src="../assets/img/Tengxun.jpg" alt="图片" width="100%" height="100%">
      </div>
      <router-link to="" style="color: black">
        <div style="width: 100%;height: 55px;font-size:20px;font-weight: bolder;">
          腾讯辞退大量员工
        </div>
      </router-link>
      <div style="width: 100%;height: 56px;font-size:20px;background-color: #e1e4e8">
        <span style="color: #808A87">摘要</span>
      </div>
    </div>
    <div class="two" style="width:23%;height: 100%;background-color: #e1e4e8">
      <div style="font-size:20px ;display: flex;align-items:center;width: 100%;height: 40px;">
        <p style="font-size: 20px;font-weight: bolder;"><i class="el-icon-magic-stick"></i>热点</p>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          hide-on-single-page
          layout="prev,next"
          :total="5" style="position: relative;left: 48%">
        </el-pagination>
      </div>
      <div style="width: 100%;height: 300px">
        <div v-for="(item,index) in postList1" key="index" style="width: 100%;">
          <div class="itemList1" style="height: 60px;display: flex;align-items: center">
            <router-link class="article-link" :to="{path:'/postDetail',query:{id: item.id}}" style="color: black">
              <div class="zy" style="font-size: 20px">{{item.post_title}}</div>
              <div class="zy" style="font-size: 20px;color: #808A87">{{item.articleAbstract}}</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="three" style="width:23%;height: 100%;background-color: #e1e4e8">
      <div style="font-size:20px ;display: flex;align-items:center;width: 100%;height: 40px;">
        <p style="font-size: 20px;font-weight: bolder;"><i class="el-icon-position"></i>飙升</p>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          hide-on-single-page
          layout="prev,next"
          :total="5" style="position: relative;left: 48%">
        </el-pagination>
      </div>
      <div style="width: 100%;height: 300px">
        <div v-for="(item,index) in postList2" key="index" style="width: 100%;">
          <div class="itemList2" style="height: 60px;display: flex;align-items: center">
            <router-link class="article-link" :to="{path:'/postDetail',query:{id: item.id}}" style="color: black">
              <div  class="zy" style="font-size: 20px">{{item.post_title}}</div>
              <div  class="zy"  style="font-size: 20px;color: #808A87">{{item.articleAbstract}}</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="four" style="width:24%;height: 100%;background-color: #e1e4e8">
      <div class="block" style="width: 100%;background-color: white">
        <el-carousel trigger="click" height="350px">
          <el-carousel-item v-for="item in imgList" :key="id">
<!--            <h3 class="small">{{ item }}</h3>-->
            <img :src="item.src" alt="图片" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      currentPage:1,
      pagesize:5,
      postList1:[],
      postList2:[],
      imgList:[
        {id:0,src:require("../assets/img/Numb.png")},
        {id:1,src:require("../assets/img/Bite.png")},
        {id:2,src:require("../assets/img/Moss.png")},
      ]
    }
  },
  methods:{
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    selectTopByComment(){
      this.$http.post('http://localhost:8888/Post/selectTopByComment').then(
        function (res){
          this.postList1=res.data.data;
        })
    },
    selectTopByView(){
      this.$http.post('http://localhost:8888/Post/selectTopByView').then(
        function (res){
          this.postList2=res.data.data;
        })
    }
  },
  created() {
    this.selectTopByComment();
    this.selectTopByView();
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.all{
  width: 100%;
/*  height: 400px;*/
  background-color: white;
}
.include{
  width: 94%;
  height: 350px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.itemList1{
  width: 100%;
  height: 60px;
  border: 1px solid #e1e4e8;
  border-radius: 2px;
}
.itemList2{
  width: 100%;
  height: 60px;
  border: 1px solid #e1e4e8;
  border-radius: 2px;
}
.zy{
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap:break-word;
  -webkit-line-clamp:1;
  -webkit-box-orient: vertical;
  width: 21vw;
}
</style>
